<template>
    <div class="SetPicker" :class="showDraewe ?'anmeSetPicker':''">
        <div class="butisShoe" @click="showdrawer">
            <i :class="showDraewe?'el-icon-close':'el-icon-setting'"></i>
        </div>
        <el-drawer
            :modal="false"
            :show-close="false"
            :visible.sync="showDraewe"
            size="130px"
            class="SetPicker_body"
        >
            <el-switch name="picker" v-model="eye" @change="switchChang('eye')" active-text="护眼模式"></el-switch>
            <el-switch
                name="picker"
                v-model="statr"
                @change="switchChang('statr')"
                active-text="标准模式"
            ></el-switch>
            <el-switch
                name="picker"
                v-model="night"
                @change="switchChang('night')"
                active-text="少女粉系"
            ></el-switch>
            <div style="width: 100%;height: 100px;"></div>
            <div class="calculator">
                <el-button type="primary" size="small" @click="handleClickHandoverOpen">交班通知</el-button>
            </div>
            <div class="calculator">
                <el-badge :value="SetPickerList.length" class="item">
                    <el-button type="primary" size="small" @click="handleClickComingOpen">接班信息</el-button>
                </el-badge>
            </div>
            <div class="calculator">
                <el-button type="primary" size="small" @click="agentLogOutBackup">电子报备表</el-button>
            </div>
            <div class="calculator">
                <el-button type="primary" size="small" @click="callSummaryOpen">话后小结</el-button>
            </div>

            <!-- <div class="calculator">
                <el-button type="primary" size="small" @click="handleCalculator">计算器</el-button>
            </div>
            <div class="calculator">
                <el-button type="primary" size="small" @click="handleInterestCalculator">利息计算器</el-button>
            </div>
            <div class="calculator">
                <el-button type="primary" size="small" @click="handleStageCalculator">分期计算器</el-button>
            </div>-->
        </el-drawer>
        <el-dialog
            v-drag
            :visible="handleHandoverFlag"
            append-to-body
            center
            width="900px"
            class="header-button dialogHeader"
            custom-class="skillGroupDialog"
            @close="handleHandoverFlag=false"
            :close-on-click-modal="false"
        >
            <div slot="title" class="dialog_title">交班数据录入</div>
            <div class="dialog_body">
                <Handover :handleclickClose="handleclickClose" />
            </div>
        </el-dialog>
        <el-dialog
            v-drag
            :visible="handleComingFlag"
            append-to-body
            center
            width="1100px"
            class="header-button dialogHeader"
            custom-class="skillGroupDialog"
            @close="handleComingFlag=false"
            :close-on-click-modal="false"
        >
            <div slot="title" class="dialog_title">我的接班信息</div>
            <div class="dialog_body">
                <on-coming
                    :onComingTableDate="SetPickerList"
                    :handleclickComingClose="handleclickComingClose"
                />
            </div>
            <div class="text_center" style="margin-top:20px;">
                <el-button type="primary" size="small" @click="handleclickComingClose">取消</el-button>
            </div>
        </el-dialog>
        <!-- <div v-if="calculatorFlag" class="columnDialog" v-drag>
            <div class="column_header">
                <span class="column_span">计算器</span>
                <i class="el-icon el-icon-close column_close" @click="calculatorClose"></i>
            </div>
        </div>-->

        <!-- 坐席选择弹框 -->
        <el-dialog
            v-drag
            :visible="agentBackuosDialogShowFlag"
            append-to-body
            center
            width="1100px"
            class="header-button dialogHeader"
            custom-class="skillGroupDialog"
            @close="handleClose"
            :close-on-click-modal="false"
        >
            <div slot="title">签出报备</div>
            <el-form
                :model="Edit"
                class="menu-setting"
                label-position="right"
                ref="Edit"
                label-width="100px"
                :rules="formRules"
                size="small"
            >
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="签出时间" prop="logoutTime">
                            <!--<el-input v-model="Edit.logoutTime" placeholder="请输入" style="width: 150px;" v-bind:disabled="true"/>-->
                            <el-date-picker
                                v-model="Edit.logoutTime"
                                type="datetime"
                                placeholder="请选择签出时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签入时间" prop="loginTime">
                            <!--<el-input v-model="Edit.loginTime" placeholder="请输入" style="width: 150px;" v-bind:disabled="true"/>-->
                            <el-date-picker
                                v-model="Edit.loginTime"
                                type="datetime"
                                placeholder="请选择签入时间"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                format="yyyy-MM-dd HH:mm:ss"
                            ></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="签入时长" prop="loginLong">
                            <el-input
                                v-model="Edit.loginLong"
                                placeholder="请输入"
                                style="width: 150px;"
                                v-bind:disabled="false"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="是否审核" prop="isExamine">
                            <!--<el-input v-model="Edit.isExamine" placeholder="请输入" style="width: 150px;" />-->
                            <el-radio label="1" v-model="Edit.isExamine" border>是</el-radio>
                            <el-radio label="0" v-model="Edit.isExamine" border>否</el-radio>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="审核人" prop="examineUser">
                            <el-input
                                v-model="Edit.examineName"
                                placeholder="请输入"
                                style="width: 150px;"
                                v-bind:disabled="true"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="签出原因" prop="logoutReason">
                    <textarea
                        v-model="Edit.logoutReason"
                        placeholder="请输入"
                        style="width: 80%; height: 100px"
                    />
                </el-form-item>
            </el-form>
            <div slot="footer" class="btnBox footer">
                <el-button
                    size="small"
                    id="holdBtnC"
                    icon="el-icon-circle-close"
                    @click="handleClose"
                >取 消</el-button>
                <el-button
                    type="primary"
                    size="small"
                    icon="el-icon-circle-check"
                    @click="submitButton"
                >提 交</el-button>
                <el-button size="small" type="primary" @click="queryList">查 看</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
// import { now } from 'utils/Date';
import { getToken, getTokenHsbankNo } from '@/utils/auth';
import Handover from './Handover';
import OnComing from './OnComing.vue';
export default {
    name: 'SetPicker',
    props: {
        userAssociate: {
            type: Object,
            required: false,
        }
    },
    data() {
        return {
            showDraewe: false,
            butRight: 0,
            eye: false,
            statr: true,
            night: false,
            stageFlag: false, // 分期
            interestFlag: false, // 利息
            calculatorFlag: false,
            interestCalculatorFlag: false,
            stageCalculatorFlag: false,
            agentBackuosDialogShowFlag: false,
            handleHandoverFlag: false,//交接班按钮
            handleComingFlag: false,//接班页面展示标签
            onComingTableDate: [],//接班页面 的数据
            // ComingNum: '0',
            // 重置loading
            resetLoading: false,
            interestFrom: {
                operationName: '',
            },
            stageFrom: {
                operationName: '',
            },
            formRules: {
                isExamine: [
                    { required: true, message: '请选择是否需要确认', trigger: 'blur' },
                ],
                examineName: [
                    { required: true, message: '请选择审核人', trigger: 'blur' },
                ],
                logoutReason: [
                    { required: true, message: '请输入签出原因', trigger: 'blur' },
                ],
            },
            interestRules: {
                operationName: [{}],
            },
            stageRules: {
                operationName: [{}],
            },
            // 坐席签出报备表字段
            Edit: {
                loginTime: '',
                logoutTime: '',
                loginLong: '',
                isExamine: '',
                examineUser: '',
                logoutReason: '',
                loginId: '',
                agentId: '',
                status: '',
                examineName: '',
            },
        };
    },
    components: {
        Handover,
        OnComing,
    },
    computed: {
        ...mapGetters([
            'teamInfo',
            'userInfo',
            'SetPickerList',//公告数据
        ])
    },
    mounted() {
        const docmentey = document.getElementsByTagName('body')[0];
        //判断 userInfo.interfaceTheme 的值 如果是 eye  statr night
        // docmentey.id = 'protection';
        if (this.userAssociate.interfaceTheme === 'night') {
            this.eye = false;
            this.statr = false;
            this.night = true;
            docmentey.id = 'neightAction';
        } else if (this.userAssociate.interfaceTheme === 'eye') {
            this.eye = true;
            this.statr = false;
            this.night = false;
            docmentey.id = 'Eleshield';
        } else if (this.userAssociate.interfaceTheme === 'statr') {
            this.eye = false;
            this.statr = true;
            this.night = false;
            docmentey.id = 'protection';
        } else {
            this.eye = false;
            this.statr = true;
            this.night = false;
            docmentey.id = 'protection';
        }
        // console.log('eye 模式');
        // 这个是接班数据 先请求到数据 不展示
        // this.getComingTableDate();
    },
    methods: {
        // 交接班页面打开
        handleClickHandoverOpen() {
            this.handleHandoverFlag = true;
            this.showDraewe = false;
        },
        // 交接 班页面关闭
        // 点击取消
        handleclickClose() {
            this.handleHandoverFlag = false;

        },
        // 接班页面展示问题
        handleClickComingOpen() {
            this.handleComingFlag = true;
            this.showDraewe = false;
        },
        // 点击取消  接班页面
        handleclickComingClose() {
            this.handleComingFlag = false;
        },


        showdrawer() {
            this.showDraewe = !this.showDraewe;
        },
        setMountedEye() {
            this.$nextTick(() => {
                docmente_body.id = 'protection';
            })
        },
        switchChang(a) {
            console.log('this.eye-', this.eye, 'this.night-', this.night);
            const docmente_body = document.getElementsByTagName('body')[0];
            console.log('a', a);
            let interfaceTheme = '';
            switch (a) {
                case 'statr':
                    this.eye = false;
                    this.night = false;
                    this.statr = true;
                    docmente_body.id = 'protection';
                    console.log('docmente_body', docmente_body.id);
                    interfaceTheme = 'statr';
                    break;
                case 'eye':
                    this.statr = false;
                    this.night = false;
                    this.eye = true;
                    docmente_body.id = 'Eleshield';
                    console.log('docmente_body', docmente_body.id);
                    interfaceTheme = 'eye';
                    break;
                case 'night':
                    this.statr = false;
                    this.eye = false;
                    this.night = true;
                    docmente_body.id = 'neightAction';
                    console.log('docmente_body', docmente_body.id);
                    interfaceTheme = 'night';
                    break;

                default:
                    break;
            }
            console.log('查看数值是否修改成功！', interfaceTheme);
            this.setSubColorFun(interfaceTheme);
        },
        setSubColorFun(interfaceTheme) {
            let parent = {
                id: this.userAssociate.id,
                interfaceTheme: interfaceTheme,
            };
            this.$post.information.themeUpdate(parent).then((res) => {
                if (res.data.success) {
                    this.$message.success('主题色修改完成')
                }
            });
        },
        handleCalculator() {
            this.calculatorFlag = true;
            this.showDraewe = false;
        },
        // 计算器弹框关闭
        calculatorClose() {
            this.calculatorFlag = false;
        },
        // 利息计算器弹框
        handleInterestCalculator() {
            this.interestCalculatorFlag = true;
            this.showDraewe = false;
        },
        // 利息计算弹框关闭
        interestClose() {
            this.interestCalculatorFlag = false;
        },
        // 利息计算器试算
        handleInterest() {
            this.interestFlag = true;
        },
        // 利息计算器重置
        handleResetInterest() {
            // 清空分期金额、手续费率
            this.interestFlag = false;
        },
        // 分期计算器弹框
        handleStageCalculator() {
            this.stageCalculatorFlag = true;
            this.showDraewe = false;
        },
        // 分期计算器弹框关闭
        stageClose() {
            this.stageCalculatorFlag = false;
        },
        // 分期计算器试算
        handleStage() {
            this.stageFlag = true;
        },
        // 分期计算器重置
        handleResetStage() {
            // 清空分期金额、手续费率
            this.stageFlag = false;
        },
        //坐席电子报备表
        agentLogOutBackup() {
            this.Edit.examineName = this.teamInfo.leaderName;
            var params = {
                "loginId": getToken() ? JSON.parse(getToken()).userAccount : '',
                "agentId": getToken() ? JSON.parse(getToken()).ctiNum : '',
            };
            this.$post.agentLogoutBackups.getAgentLogoutBackupsOne(params)
                .then((res) => {
                    if (res.status === 200) {
                        this.Edit.loginTime = res.data.content.loginTime;
                        this.Edit.logoutTime = res.data.content.logoutTime;
                        this.Edit.loginLong = res.data.content.loginLong;
                    } else {
                        this.$confirm(res.data.msg, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                });
            this.agentBackuosDialogShowFlag = true;
            this.showDraewe = false;
        },
        callSummaryOpen() {
            top.softphone.callDropAfter();
        },
        // 弹框关闭
        handleClose() {
            this.agentBackuosDialogShowFlag = false;
            this.showDraewe = false;
        },
        //提交
        submitButton() {
            this.$refs.Edit.validate((valid) => {
                if (valid) {
                    if (this.Edit.isExamine === '1') {
                        this.Edit.status = '0';
                    } else {
                        this.Edit.status = '1';
                    }
                    this.Edit.loginId = getToken() ? JSON.parse(getToken()).userAccount : '';
                    this.Edit.agentId = getToken() ? JSON.parse(getToken()).ctiNum : '';
                    this.Edit.examineUser = this.teamInfo.leaderId;
                    this.$post.agentLogoutBackups.updateAgentLogoutBackups(this.Edit)
                        .then((res) => {
                            if (res.data.success) {
                                this.$message.success('添加成功');
                                this.agentBackuosDialogShowFlag = false;
                            } else {
                                this.$message.error(res.data.msg);
                            }
                        });
                } else {
                    this.$message.warning('请完成表单填写！');
                }
            });
        },
        // 查看更多
        queryList() {
            console.log("JSON.parse(getToken())", JSON.parse(getToken()));
            // 这里执行  UPDATE_ACTIVE_MENU 这个方法 是为了打开显示 tagsview 这个组件
            this.$store.commit('menu/UPDATE_ACTIVE_MENU', false);
            this.$router.push('/agentLogoutBackups/agentLogoutBackupList');
            this.handleClose();
        },
    },
};
</script>
<style lang="scss">
.SetPicker {
    .SetPicker_body {
        .el-drawer__open .el-drawer {
            .el-drawer__body {
                padding-left: 8px;
            }
        }
    }
}
</style>
<style lang="scss" scoped>
.SetPicker {
    position: absolute;
    right: 0px;
    top: 30%;
    // width: 200px;
    // height: 100px;
    z-index: 9999;
    transition: 0.2s;
    .butisShoe {
        width: 38px;
        height: 38px;
        background: #409eff;
        color: #fff;
        border-radius: 6px 0 0 6px;
        cursor: pointer;
        i {
            font-size: 24px;
            line-height: 38px;
        }
    }

    .columnDialog {
        width: 400px;
    }
    .columnDialog {
        z-index: 3;
        padding: 12px;
        background: #fff;
        border-radius: 5px;
        box-shadow: 0 2px 10px 0 rgba(205, 222, 255, 1);
        position: absolute;
        right: 20px;
        top: 120px;
        .column_header {
            line-height: 36px;
            margin-bottom: 10px;
            background-color: #a98a7f;
            .column_span {
                font-size: 18px;
                font-weight: 600;
                color: #fff;
            }
            .column_close {
                position: absolute;
                right: 20px;
                top: 13px;
                width: 34px;
                height: 34px;
                line-height: 35px;
                cursor: pointer;
            }
        }
        .colum_body {
            width: 97%;
        }
        .column_button {
            width: 200px;
            margin-top: 10px;
        }
        .column_buttonStage {
            width: 172px;
        }
    }
}
.calculator {
    margin: 10px auto;
    text-align: center;
}
.anmeSetPicker {
    right: 130px;
}
</style>
